<template>
  <div class="container">
    <div class="top">
      <span :class="{ allSel: selectAll }" @click="checkedAll">√ </span>&emsp;
      <input
        type="text"
        class="tpinp"
        placeholder="请输入一些内容"
        v-model="tpinp"
        @keyup.enter="addInfo"
      />
    </div>
    <div class="content">
      <div class="mess" v-for="(item, index) in usersNew" :key="index">
        <p>
          <input
            type="checkbox"
            class="sel"
            v-model="item.checked"
            @click="ischecked(index)"
          />
        </p>
        <template v-if="index == editsIndex">
          <input
            type="text"
            @blur="mod(item)"
            class="maininp"
            v-model="item.content"
          />
        </template>
        <template v-else>
          <p
            :class="['maincon', { selmod: item.checked }]"
            @dblclick="edit(index)"
          >
            {{ item.content }}
          </p>
        </template>
        <p class="del" @click="del(index)">X</p>
      </div>
    </div>
    <div class="footer">
      <p>
        <span>{{ unFinish }}</span> 项未完成
      </p>
      <div class="oper">
        <p @click="showAll">全部</p>
        &emsp;
        <p @click="uncomplete">未完成</p>
        &emsp;
        <p @click="completed">已完成</p>
      </div>
      <p @click="delSel">清除已完成</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tpinp: "",
      users: [],
      autoId: 0,
      editsIndex: null,
      usersNew: JSON.parse(localStorage.getItem("users") || []),
    };
  },
  created() {
    console.log(this.tpinp);
    
    // 初始化
    this.users = this.usersNew;
    if (this.users.length > 0) {
      this.autoId = this.users[this.users.length - 1].id;
    }
  },
  methods: {
    // 添加
    addInfo() {
      
      console.log(this.tpinp);
      
      if (this.tpinp != "") {
        this.users.push({
          id: ++this.autoId,
          content: this.tpinp,
          checked: false,
        });
        this.tpinp = "";
        localStorage.setItem("users", JSON.stringify(this.users));
      }else{
        alert('请输入内容')
      }
    },
    // 删除
    del(index) {
      this.users.splice(index, 1);
      localStorage.setItem("users", JSON.stringify(this.users));
    },
    //清除选中
    delSel() {
      this.users = this.users.filter((item) => !item.checked);
      localStorage.setItem("users", JSON.stringify(this.users));
      this.usersNew = this.users;
    },
    // 修改
    edit(index) {
      this.editsIndex = index;
    },
    mod(item) {
      localStorage.setItem("users", JSON.stringify(this.users));
    },
    // 全选
    checkedAll() {
      this.selectAll = !this.selectAll;
    },
    // 显示全部
    showAll() {
      this.usersNew = this.users;
    },
    // 显示未完成
    uncomplete() {
      this.usersNew = this.users.filter((user) => !user.checked);
    },
    // 显示已完成
    completed() {
      this.usersNew = this.users.filter((user) => user.checked);
    },
    // 单独选中
    ischecked(index) {
      this.usersNew.forEach((item) => {
        if (item.id == this.users[index].id) {
          item.checked = !item.checked;
          localStorage.setItem("users", JSON.stringify(this.users));
        }
      });
    },
  },
  computed: {
    // 全选
    selectAll: {
      get() {
        return this.users.every((users) => users.checked);
      },
      set(val) {
        this.users.forEach((item) => {
          item.checked = val;
        });
        localStorage.setItem("users", JSON.stringify(this.users));
      },
    },
    // 未完成数量
    unFinish() {
      return this.usersNew.filter((user) => !user.checked).length;
    },
  },
  components: {},
};
</script>

<style scoped>
.container {
  width: 600px;
  height: 400px;
  border: 1px solid grey;
  box-shadow: 5px 5px 5px rgb(190, 187, 187, 0.8);
  margin: auto;
  position: relative;
  /* box-sizing: border-box; */
}
.top {
  width: 100%;
  line-height: 50px;
  border-bottom: 1px solid grey;
  align-items: center;
  cursor: pointer;
}
.allSel {
  color: lightgrey;
}
.tpinp {
  width: 90%;
  height: 50px;
  border: none;
  outline: none;
}
.content {
  box-sizing: border-box;
  /* padding: 0 10px */
  overflow-y: auto;
  height: 300px;
}
.mess {
  line-height: 30px;
  display: flex;
  justify-content: space-between;
  padding: 0 10px;
  border-bottom: 1px solid grey;
  cursor: pointer;
  position: relative;
}
.mess .sel {
  width: 20px;
  height: 20px;
  border: 1px solid grey;
  border-radius: 50%;
}
.maincon {
  width: 520px;
  line-height: 30px;
  text-align: left;
}
.selmod {
  text-decoration: line-through;
  color: lightgrey;
  font-style: italic;
}
.maininp {
  width: 520px;
  line-height: 30px;
  text-align: left;
  border: none;
}
.del {
  width: 20px;
  position: absolute;
  right: 10px;
  display: none;
}
.mess:hover .del {
  display: block;
}
.footer {
  width: 600px;
  line-height: 20px;
  display: flex;
  justify-content: space-between;
  position: absolute;
  bottom: 0;
  padding: 0 10px;
  box-sizing: border-box;
  border-top: 1px solid grey;
  background-color: #fff;
  cursor: pointer;
}
.oper {
  display: flex;
  justify-content: space-around;
  width: 200px;
}
</style>
